<template>
	<view class="page">
		<view class="header">
			<view class="header-left" @tap="goBack">
				<uni-icons type="arrowleft" size="24" color="#333"></uni-icons>
			</view>
			<view class="header-title">班级申请</view>
			<view class="header-right"></view>
		</view>

		<view class="content">
			<view class="tabs">
				<view :class="['tab', activeTab === 'pending' ? 'active' : '']" @tap="switchTab('pending')">待处理</view>
				<view :class="['tab', activeTab === 'approved' ? 'active' : '']" @tap="switchTab('approved')">已同意</view>
				<view :class="['tab', activeTab === 'rejected' ? 'active' : '']" @tap="switchTab('rejected')">已拒绝</view>
			</view>

			<view class="application-list">
				<view class="application-item" v-for="(application, index) in filteredApplications" :key="index">
					<view class="applicant-info">
						<view class="avatar">
							<text class="avatar-text">{{ application.name.charAt(0) }}</text>
						</view>
						<view class="applicant-details">
							<view class="applicant-name">{{ application.name }}</view>
							<view class="applicant-id">学号: {{ application.studentId }}</view>
							<view class="application-time">{{ application.time }}</view>
						</view>
					</view>
					<view class="application-actions" v-if="activeTab === 'pending'">
						<button class="action-btn reject-btn" @tap="rejectApplication(index)">拒绝</button>
						<button class="action-btn approve-btn" @tap="approveApplication(index)">同意</button>
					</view>
					<view class="application-status" v-else>
						<text :class="['status-text', application.status]">{{ application.statusText }}</text>
					</view>
				</view>

				<view class="empty-state" v-if="filteredApplications.length === 0">
					<uni-icons type="info" size="48" color="#ccc"></uni-icons>
					<text class="empty-text">暂无申请记录</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue';

	const activeTab = ref('pending');

	// 模拟申请数据
	const applications = ref([
		{
			name: '张小明',
			studentId: '2023001',
			time: '2023-10-15 14:30',
			status: 'pending',
			statusText: '待处理'
		},
		{
			name: '李小红',
			studentId: '2023002',
			time: '2023-10-14 09:15',
			status: 'pending',
			statusText: '待处理'
		},
		{
			name: '王小刚',
			studentId: '2023003',
			time: '2023-10-13 16:45',
			status: 'approved',
			statusText: '已同意'
		},
		{
			name: '赵小丽',
			studentId: '2023004',
			time: '2023-10-12 11:20',
			status: 'rejected',
			statusText: '已拒绝'
		}
	]);

	const filteredApplications = computed(() => {
		return applications.value.filter(app => app.status === activeTab.value);
	});

	const switchTab = (tab) => {
		activeTab.value = tab;
	};

	const approveApplication = (index) => {
		// 在实际应用中，这里需要根据实际数据结构找到对应的申请
		const pendingApplications = applications.value.filter(app => app.status === 'pending');
		if (index < pendingApplications.length) {
			const actualIndex = applications.value.indexOf(pendingApplications[index]);
			applications.value[actualIndex].status = 'approved';
			applications.value[actualIndex].statusText = '已同意';
			uni.showToast({
				title: '已同意申请',
				icon: 'success'
			});
		}
	};

	const rejectApplication = (index) => {
		// 在实际应用中，这里需要根据实际数据结构找到对应的申请
		const pendingApplications = applications.value.filter(app => app.status === 'pending');
		if (index < pendingApplications.length) {
			const actualIndex = applications.value.indexOf(pendingApplications[index]);
			applications.value[actualIndex].status = 'rejected';
			applications.value[actualIndex].statusText = '已拒绝';
			uni.showToast({
				title: '已拒绝申请',
				icon: 'none'
			});
		}
	};

	const goBack = () => {
		uni.navigateBack();
	};
</script>

<style>
	.page {
		min-height: 100vh;
		background-color: #f8f9fa;
	}

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		background-color: #fff;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		position: sticky;
		top: 0;
		z-index: 999;
	}

	.header-left,
	.header-right {
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.header-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}

	.content {
		padding: 30rpx;
	}

	.tabs {
		display: flex;
		background-color: #fff;
		border-radius: 16rpx;
		margin-bottom: 30rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03);
	}

	.tab {
		flex: 1;
		text-align: center;
		padding: 25rpx 0;
		font-size: 28rpx;
		color: #666;
		font-weight: 500;
		transition: all 0.3s ease;
	}

	.tab.active {
		background-color: #1976D2;
		color: #fff;
	}

	.application-list {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03);
	}

	.application-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 0;
	}

	.application-item:not(:last-child) {
		border-bottom: 1rpx solid #eee;
	}

	.applicant-info {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background: linear-gradient(135deg, #1976D2, #64B5F6);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
	}

	.avatar-text {
		color: #fff;
		font-size: 32rpx;
		font-weight: bold;
	}

	.applicant-details {
		display: flex;
		flex-direction: column;
	}

	.applicant-name {
		font-size: 30rpx;
		color: #333;
		margin-bottom: 6rpx;
		font-weight: 500;
	}

	.applicant-id {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 6rpx;
	}

	.application-time {
		font-size: 22rpx;
		color: #999;
	}

	.application-actions {
		display: flex;
	}

	.action-btn {
		width: 100rpx;
		height: 50rpx;
		font-size: 24rpx;
		border-radius: 8rpx;
		margin-left: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: none;
		font-weight: 500;
	}

	.reject-btn {
		background-color: #fff;
		color: #f44336;
		border: 1rpx solid #f44336;
	}

	.approve-btn {
		background-color: #4CAF50;
		color: #fff;
	}

	.application-status {
		display: flex;
		align-items: center;
	}

	.status-text {
		font-size: 26rpx;
		padding: 10rpx 20rpx;
		border-radius: 8rpx;
		font-weight: 500;
	}

	.status-text.approved {
		background-color: #e8f5e9;
		color: #4CAF50;
	}

	.status-text.rejected {
		background-color: #ffebee;
		color: #f44336;
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 100rpx 0;
	}

	.empty-text {
		font-size: 28rpx;
		color: #999;
		margin-top: 20rpx;
	}
</style>